<template>
  <el-container class="outside-box">
    <el-header height="50px">
      <header class="main-header">
        <!-- Logo -->
        <router-link to="/" class="logo" style="padding: 0">
          <!-- mini logo for sidebar mini 50x50 pixels -->
          <span class="logo-mini"></span>
          <!-- logo for regular state and mobile devices -->
          <span class="logo-lg" style="width: 100%; text-align: left; background-color: #409EFF"><img style="height: 100%;" src="@/assets/erp.png" alt=""></span>
        </router-link>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top">
          <!-- Sidebar toggle button-->
          <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
            <span class="sr-only">Toggle navigation</span>
          </a>
          <div class="">
            <ul class="nav navbar-nav">
              <li class="dropdown messages-menu" v-for="(item,index) in topMenusData"
                  :class="{'active': index == menusIndex}">
                <a :href="item.url" @click="getChildrenByTopMenuId(item.id,index)" class="dropdown-toggle"
                   data-toggle="dropdown">
                  {{item.title}}
                </a>
              </li>
            </ul>
          </div>
          <Login-User @commited="statusQuery"></Login-User>
        </nav>
      </header>
    </el-header>
    <el-container class="inside-box" style="height: calc(100% - 50px);">
      <el-aside width="230px" class="main-sidebar">
      <!--  <aside class="main-sidebar">-->
          <!-- sidebar: style can be found in sidebar.less -->
          <!--<section class="sidebar" style="height: auto;">-->
          <!--<ul class="sidebar-menu tree" data-widget="tree" v-for="(menuItem,_index) in sliderMenusData">-->
          <!--<Sidebar :model="menuItem" :index="_index"></Sidebar>-->
          <!--</ul>-->
          <!--</section>-->

        <section class="sidebar" style="height: auto;">
          <ul class="sidebar-menu tree" data-widget="tree">
            <!--<ul class="sidebar-menu tree" data-widget="tree" v-for="(menuItem,_index) in sliderMenusData">-->
            <!--<Sidebar :model="menuItem" :index="_index"></Sidebar>-->
            <li ref="menuTree" :class='activeTwoCatalogIndex == index ?"active treeview menu-open": "treeview"'
                v-for="(menuItem,index) in sliderMenusData" @click="activeTwoCatalog(index)">
              <a>
                <i class="fa fa-dashboard"></i> <span>{{menuItem.title}}</span>
                <span class="pull-right-container">
                   <i class="fa fa-angle-left pull-right"></i>
                 </span>
              </a>
              <ul class="treeview-menu" ref="childMenuTree">
                <li :class='activeThreeCatalogIndex == menuIndex ?"active": ""'
                    v-for="(menu,menuIndex) in menuItem.children" @click.stop="activeThreeCatalog(menuIndex)">
                  <router-link :to="menu.url">
                    <i class="fa fa-circle-o"></i> {{menu.title}}
                  </router-link>
                </li>
              </ul>
            </li>
          </ul>
        </section>
          <!-- /.sidebar -->
        <!--</aside>-->
      </el-aside>
      <el-main>
        <div class="content-wrapper">
          <!--<router-view :menusPerms="menusList"></router-view>-->
          <router-view></router-view>
          <!--@commited="showModal"-->
          <div class="modal fade in" id="pwdModal" :style="{'display': visibleApply}" >
            <div class="modal-dialog">
              <div class="modal-content" style="width: 500px; margin-left: 300px;">
                <div class="modal-header" style="background-color: #fff;">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title">修改密码</h4>

                </div>
                <div class="modal-body">
                  <p class="login-box-msg text-red" v-if="errorMessage">{{errorMessage}}</p>
                  <div class="form-group">
                    <div class="flex">
                      <label for="" class="control-label bg-gray text-right" style="min-width: 200px">请输入验证码：</label>
                      <div class="inline-block">
                        <input type="text" class="form-control" v-model="submitPassword.randomCode" maxlength="4" placeholder="请输入验证码" style="width: 140px; display: inline;">
                        <button type="button" :style="{'color':bgColor}" :disabled="disabled" @click="sendCode" style="border-radius:5%; width: 100px;height: 34px; background-color: #F4F4F5; border: 1px solid #d2d6de; outline:none;">{{btnContent}}</button>
                      </div>
                    </div>
                  </div>
                  <!--<div class="form-group">-->
                    <!--<div class="flex">-->
                      <!--<label for="" class="control-label bg-gray text-right" style="min-width: 200px" prop="applyTotalAmount">请输入旧密码：</label>-->
                      <!--<div class="inline-block">-->
                        <!--<input v-model="submitPassword.oldPassWord" type="text" class="form-control" style="width: 245px;" maxlength="20" placeholder="请输入旧密码">-->
                      <!--</div>-->
                    <!--</div>-->
                  <!--</div>-->
                  <div class="form-group">
                    <div class="flex">
                      <label for="" class="control-label bg-gray text-right" style="min-width: 200px">请输入新密码：</label>
                      <div class="inline-block">
                        <input v-model="submitPassword.newPassWord" type="password" class="form-control" style="width: 245px;" maxlength="20" placeholder="请输入新密码">
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="flex">
                      <label for="" class="control-label bg-gray text-right" style="min-width: 200px">请再次输入新密码：</label>
                      <div class="inline-block">
                        <input v-model="submitPassword.ConfirmNewPassword" type="password" class="form-control" style="width: 245px;" maxlength="20"
                               placeholder="请再次输入新密码">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="modal-footer" style="text-align: center;">
                  <!--data-dismiss="modal"-->
                  <button type="button" class="btn btn-primary" @click="editUserPasseord()" style="background-color: #409EFF;width: 68px; height: 40px;">保存
                  </button>
                  <!--data-dismiss="modal"-->
                  <button type="button" class="btn btn-default" @click="statusQuery('none')" style="width: 68px; height: 40px;">关闭</button>
                </div>
              </div>
              <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>

<!--  <div class="wrapper">

    <header class="main-header">
      &lt;!&ndash; Logo &ndash;&gt;
      <router-link to="/" class="logo">
        &lt;!&ndash; mini logo for sidebar mini 50x50 pixels &ndash;&gt;
        <span class="logo-mini"></span>
        &lt;!&ndash; logo for regular state and mobile devices &ndash;&gt;
        <span class="logo-lg"><img style="height: 50px;" src="@/assets/erp.png" alt=""></span>
      </router-link>
      &lt;!&ndash; Header Navbar: style can be found in header.less &ndash;&gt;
      <nav class="navbar navbar-static-top">
        &lt;!&ndash; Sidebar toggle button&ndash;&gt;
        <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
          <span class="sr-only">Toggle navigation</span>
        </a>
        <div class="">
          <ul class="nav navbar-nav">
            <li class="dropdown messages-menu" v-for="(item,index) in topMenusData"
                :class="{'active': index == menusIndex}">
              <a :href="item.url" @click="getChildrenByTopMenuId(item.id,index)" class="dropdown-toggle"
                 data-toggle="dropdown">
                {{item.title}}
              </a>
            </li>
          </ul>
        </div>
        <Login-User></Login-User>
      </nav>
    </header>
    <div  class="aside-box">

      <aside class="main-sidebar">
        &lt;!&ndash; sidebar: style can be found in sidebar.less &ndash;&gt;
        &lt;!&ndash;<section class="sidebar" style="height: auto;">&ndash;&gt;
        &lt;!&ndash;<ul class="sidebar-menu tree" data-widget="tree" v-for="(menuItem,_index) in sliderMenusData">&ndash;&gt;
        &lt;!&ndash;<Sidebar :model="menuItem" :index="_index"></Sidebar>&ndash;&gt;
        &lt;!&ndash;</ul>&ndash;&gt;
        &lt;!&ndash;</section>&ndash;&gt;

        <section class="sidebar" style="height: auto;">
          <ul class="sidebar-menu tree" data-widget="tree">
            &lt;!&ndash;<ul class="sidebar-menu tree" data-widget="tree" v-for="(menuItem,_index) in sliderMenusData">&ndash;&gt;
              &lt;!&ndash;<Sidebar :model="menuItem" :index="_index"></Sidebar>&ndash;&gt;
            <li ref="menuTree" :class='activeTwoCatalogIndex == index ?"active treeview menu-open": "treeview"'
                v-for="(menuItem,index) in sliderMenusData" @click="activeTwoCatalog(index)">
              <a>
                <i class="fa fa-dashboard"></i> <span>{{menuItem.title}}</span>
                <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
              </a>
              <ul class="treeview-menu" ref="childMenuTree">
                <li :class='activeThreeCatalogIndex == menuIndex ?"active": ""'
                    v-for="(menu,menuIndex) in menuItem.children" @click.stop="activeThreeCatalog(menuIndex)">
                  <router-link :to="menu.url">
                    <i class="fa fa-circle-o"></i> {{menu.title}}
                  </router-link>
                </li>
              </ul>
            </li>
          </ul>
        </section>
        &lt;!&ndash; /.sidebar &ndash;&gt;
      </aside>
      <div class="content-wrapper">
        &lt;!&ndash;<router-view :menusPerms="menusList"></router-view>&ndash;&gt;
        <router-view></router-view>
        <div class="modal fade" id="pwdModal">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">修改密码</h4>

              </div>
              <div class="modal-body">
                <p class="login-box-msg text-red" v-if="errorMessage">{{errorMessage}}</p>
                <div class="form-group">
                  <div class="flex">
                    <label for="" class="control-label bg-gray text-right" style="min-width: 200px">请输入旧密码：</label>
                    <div class="inline-block">
                      <input v-model="submitPassword.oldPassWord" type="text" class="form-control" placeholder="请输入旧密码">
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="flex">
                    <label for="" class="control-label bg-gray text-right" style="min-width: 200px">请输入新密码：</label>
                    <div class="inline-block">
                      <input v-model="submitPassword.newPassWord" type="text" class="form-control" placeholder="请输入新密码">
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="flex">
                    <label for="" class="control-label bg-gray text-right" style="min-width: 200px">请再次输入新密码：</label>
                    <div class="inline-block">
                      <input v-model="submitPassword.ConfirmNewPassword" type="text" class="form-control"
                             placeholder="请再次输入新密码">
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-primary" @click="editUserPasseord()">保存
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              </div>
            </div>
            &lt;!&ndash; /.modal-content &ndash;&gt;
          </div>
          &lt;!&ndash; /.modal-dialog &ndash;&gt;
        </div>
      </div>
    </div>
  </div>-->
</template>

<script>
  // 公共模块组件
  import Header from '@/components/common/Header';
  import Sidebar from '@/components/common/Sidebar';
  import ListItem from '@/components/common/listItem'
  import LoginUser from '@/components/common/LoginUser'
  import {setCookie, getCookie} from "../js/common/util";
  import instance from '@/api/index.js'

  export default {
    name: "home",
    data() {
      return {
        errorMessage: '',
        activeTwoCatalogIndex: 0,
        activeThreeCatalogIndex: 0,
        submitPassword: {},
        items: [],
        treeMenusData: [],//所有菜单数据
        topMenusData: [],//一级菜单数据
        sliderMenusData: [],//当前左侧菜单
        menusList: [],
        menuListCheck: [],
        depositMenus: [],
        menusIndex: 0,
        btnContent: '获取验证码',
        disabled: false,
        bgColor: '#7B7B7B',
        visibleApply: 'none',
      }
    },
    components: {
      Header,
      Sidebar,
      ListItem,
      LoginUser
    },
    methods: {
      //三级菜单选中事宜
      activeThreeCatalog: function (index) {
        let vm = this;
        vm.activeThreeCatalogIndex = index;
      },
      //二级菜单选中事宜
      activeTwoCatalog: function (index) {
        let vm = this;
        if(vm.activeTwoCatalogIndex == index ){
          vm.activeTwoCatalogIndex = null;
        }else {
          vm.activeTwoCatalogIndex = index;
          vm.activeThreeCatalogIndex = null;
        }

      },
      //修改密码
      editUserPasseord: function () {
        let vm = this;
        //密码验证
        var reg1 = /^[A-Za-z0-9]{6,16}$/;
        var r1 = reg1.test(vm.submitPassword.newPassWord);

        if (vm.submitPassword.randomCode == null) {
          vm.errorMessage = "请输入短信码";
          return;
        }

        if (vm.submitPassword.newPassWord == null) {
          vm.errorMessage = "请输入密码";
          return;
        } else if (!r1) {
          vm.errorMessage = "只能输入字母和数字且长度为6-16位";
          return;
        }

        if (vm.submitPassword.ConfirmNewPassword != vm.submitPassword.newPassWord) {
          vm.errorMessage = '两次输入的密码不一致！请重新输入....'
          return;
        }

        // if (vm.submitPassword.ConfirmNewPassword == vm.submitPassword.newPassWord
        //   && vm.submitPassword.newPassWord == vm.submitPassword.oldPassWord) {
        //   vm.errorMessage = '新密码不能和旧密码一致！'
        //   return;
        // }

          vm.errorMessage = "";
          instance.post('/user/editUserPassword', vm.submitPassword).then(function (data) {
            vm.submitPassword = {};
            vm.show = false;
            vm.visibleApply = 'none';
            vm.$message.success("用户密码修改成功！");
        })
      },

      getSetting: function () {
        let vm = this;
        let userInfo = getCookie("userId");
        if (userInfo) {
          instance.post('/menu/menuList').then(function (data) {
            // vm.menusList = data.data.data;
            // let menusListMap = data.data.data;
            if (data.data.success) {
              let menus = data.data.data;
              vm.menusList = data.data.data;
              console.log('vm.menusList',vm.menusList)
              sessionStorage.setItem("buttenpremissions", JSON.stringify(vm.menusList));
              let treeData = vm.toTreeData(menus);
              vm.getData(0, menus);
              vm.depositMenus = [];
              for (let i = 0; i < vm.menuListCheck.length; i++) {
                if (vm.menuListCheck[i].parentId == 0) {
                  vm.depositMenus.push(vm.menuListCheck[i])
                }
              }
              //首页
              let obj = {
                children: [
                  {
                    children: [
                      {
                        children: [],
                        url: '/',
                        id: 9997,
                        parentId: 9998,
                        title: "系统首页",
                        type: 1,
                        icon: 'fa fa-cog',
                        show: false
                      }
                    ],
                    id: 9998,
                    parentId: 9999,
                    title: "系统首页",
                    type: 0,
                    show: false,
                    icon: 'fa fa-cog',
                  }
                ],
                id: 9999,
                parentId: 0,
                title: "首页",
                type: 0,
                show: false
              }
              vm.topMenusData.unshift(obj)
            }
          })
        }
      },

      getData: function (id, arry) {
        let vm = this;
        var childArry = this.familyTree(id, arry);
        if (childArry.length > 0) {
          for (var i = 0; i < childArry.length; i++) {
            let obj = {};
            obj = childArry[i];
            childArry[i].children = this.familyTree(childArry[i].menuId, arry);
            childArry[i].show = false;
            vm.menuListCheck.push(obj);
            vm.getData(childArry[i].menuId, arry);
          }
        }
      },
      //
      familyTree: function (id, arry) {
        var newArry = new Array();
        for (var i in arry) {
          if (arry[i].parentId == id)
            newArry.push(arry[i]);
        }
        return newArry;
      },

      /**
       * 通过一级菜单ID获取所有下级菜单
       * @param _menuId  菜单ID
       */
      getChildrenByTopMenuId: function (_menuId, index) {
        let vm = this;
        vm.activeTwoCatalogIndex = 0;
        vm.activeThreeCatalogIndex = 0;
        setCookie("index", index);
        setCookie("menuId", _menuId);
        for (let i = 0; i < this.topMenusData[index].children.length; i++) {
          this.topMenusData[index].children[i].show = false;
        }
        vm.menusIndex = getCookie("index");
        for (let i = 0; i < vm.topMenusData.length; i++) {
          let topMenu = vm.topMenusData[i];
          if (topMenu.id == _menuId) {
            vm.sliderMenusData = topMenu.children;
          }
        }
        this.$nextTick(function () {
          var nodeArray = Array.from(this.$refs.menuTree[0].childNodes);
          nodeArray.forEach(function (item, index) {
            if(index == 2){
              item.firstChild.lastChild.click();
            }

          })
        })
      },
      //组装树形菜单
      toTreeData: function (data) {
        let resData = data;
        let tree = [];
        let vm = this;

        //组装一级菜单
        for (let i = 0; i < resData.length; i++) {
          if (resData[i].parentId === 0) {
            let obj = {
              id: resData[i].menuId,
              title: resData[i].name,
              parentId: resData[i].parentId,
              type: resData[i].type,
              icon: resData[i].icon,
              url: resData[i].url,
              children: [],
              show: false
            };
            tree.push(obj);
            // resData.splice(i, 1);
            // i--;
          }
        }
        vm.topMenusData = tree;
        run(tree);

        //递归组装所有下级菜单
        function run(chiArr) {
          if (resData.length !== 0) {
            for (let i = 0; i < chiArr.length; i++) {
              for (let j = 0; j < resData.length; j++) {
                if (chiArr[i].id === resData[j].parentId) {
                  let obj = {
                    id: resData[j].menuId,
                    title: resData[j].name,
                    parentId: resData[j].parentId,
                    type: resData[j].type,
                    icon: resData[j].icon,
                    url: resData[j].url,
                    children: [],
                    show: false
                  };
                  chiArr[i].children.push(obj);
                  // resData.splice(j, 1);
                  // j--;
                }
              }
              run(chiArr[i].children);
            }
          }
        }

        return tree;
      },

      sendCode: function () {

        let vm = this;

        this.time = 60
        this.disabled = true
        this.bgColor = '#BCBEC2'
        this.timer()

        let param = Object.assign({
          phoneNumber: getCookie("userName"),
          codeType: 2
        });

        instance({
          method: 'post',
          url: '/user/getSms',
          params: param
        }).then(function (data) {
          if (data.data.success) {
            vm.$message.success("短信验证码发送成功！");
          } else {
            vm.$message.error("短信验证码发送失败！");
          }
        })
      },
      timer () {
        if (this.time > 0) {
          this.time--
          this.btnContent = this.time + 's后重新获取'
          setTimeout(this.timer, 1000)
        } else {
          this.time = 0
          this.bgColor = '#7B7B7B'
          this.btnContent = '获取验证码'
          this.disabled = false
        }
      },
      statusQuery(msg) {
        // console.log(msg);
        this.visibleApply = msg;
        // console.log(this.visibleApply)
      },
    },
    mounted() {
    },
    watch: {
      topMenusData: function (val) {
        if (val) {
          this.getChildrenByTopMenuId(getCookie("menuId"), getCookie("index"));

        }
      }
    },
    created() {
      this.getSetting();
      // this.getChildrenByTopMenuId(getCookie("menuId"),getCookie("index"));
    }
  }
</script>

<style scoped lang="less">
  .inside-box{
    position: absolute;
    top: 50px;
    width: 100%;
  }
  .main-header .navbar{
    background-color: #fff;
    box-shadow:0px 1px 4px 0px rgba(0,0,0,0.06);
  }
  .main-header .navbar .sidebar-toggle,
  .main-header .navbar .nav>li>a,
  .main-header .navbar .nav>li>a,
  .main-header .navbar .nav>li>a:hover{
    color: #333333;
  }
  .main-header .navbar .nav>li>a:hover{
    background:rgba(242,242,242,1);
  }
/*  .messages-menu.active{
    background:rgba(242,242,242,1);
  }*/
  .messages-menu{
    &.active{
      background:rgba(242,242,242,1);
    }
    .dropdown-toggle{
      &:hover{
        background:rgba(242,242,242,1);
      }
    }
  }
  .main-header .navbar .nav>.active>a{
    color: #333333;
  }
  .wrapper{
   background: #fff !important;
    position: relative;
  }
  .aside-box{
    position: absolute;
    top: 50px;
    bottom: 0;
  }
  .el-header{
    padding: 0;
    max-height: 100px !important;

  }
  .el-main{
    padding: 0;
    margin-left: 230px;
  }
  .content-wrapper{
/*    margin-left: 230px;*/
    margin-left: 0;
  }
 .main-sidebar{
   background: #fff;
   background-image: url("../assets/img/left-bg.png");
   background-repeat: no-repeat;
   background-size: 106% 107%;
   background-position: center;
   padding: 0;
   position: inherit;
   margin: 0;
  /* min-height: auto;*/
/*   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;*/
 }

  .sidebar a{
    color: #333333;
    font-size:16px;
  }
  .sidebar a i{
    color: #767676;
  }
   .sidebar-menu > li:hover > a,
   .sidebar-menu > li:hover > a i,
   .sidebar-menu > li.active > a,
   .sidebar-menu > li.active > a i,
   .sidebar-menu > li.menu-open > a {
    color: #409EFF;
    background: rgba(248,248,248,0.6861);
  }

  .sidebar-menu>li>.treeview-menu{
    background: rgba(248,248,248,0.6861);
  }
   .sidebar-menu .treeview-menu > li.active > a,
   .sidebar-menu .treeview-menu > li.active >a i,
   .sidebar-menu .treeview-menu > li > a:hover ,
   .sidebar-menu .treeview-menu > li > a:hover i{
    color: #409EFF;
  }
  .sidebar-menu .treeview-menu > li > a  i{
    font-size: 10px;
  }
  .sidebar-menu>li.active>a{
    border-left-color: #fff;
  }
  .main-header .navbar .sidebar-toggle{
    height: 50px;
  }
  .main-header .navbar .sidebar-toggle:hover,
  .main-header .navbar .dropdown-toggle:hover{
    background-color: rgba(242,242,242,1);
    color: #333333;
  }
</style>
